var token = localStorage.getItem('mytoken');



function getPage(page) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson${page}`,
        type: 'get',
        headers: {
            token
        },
        data: {

        },
        success: (res) => {
            console.log(res);
        }
    })
}

function getPer() {
    // console.log(token_);
    $.ajax({
        url: `http://192.168.3.184:7001/relevant`,
        type: "GET",
        headers: {
            token
            // : localStorage.getItem('mytoken')
        },
        success: function(res) {
            console.log(res);
            const _content = document.querySelector('.card');
            const showContent = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>标题</th>
             <th>介绍</th>
                <th>图片</th>
               
               
               
                <th>操作</th>`
                res.data.forEach((item, index) => {
                    // const time = getLocalTime(item.reg_time)
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);


                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td>${item.title}</td>
                        
                        <td class='year'>${item.introduce}</td>
                        <td><img class='hear' src='http://192.168.3.184:7001/${item.portrait}' /></td>
                        
                 
                        <td>
                        <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                        <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                        <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                        </td>`
                    _content.appendChild(tr)

                })
            }
            showContent()

            //创建分页
            const pagel = document.querySelector('.page');
            console.log(pagel);
            const page = () => {
                    // console.log(res.num);
                    const pageCount = Math.ceil(res.num / 10);
                    for (let i = 1; i <= pageCount; i++) {
                        const li = document.createElement('li');
                        li.id = `${i}`
                        li.innerHTML = `${i}`
                        pagel.appendChild(li)
                    }
                    const da = document.querySelectorAll('.page>li');
                    da[0].className = 'lk'
                    pagel.addEventListener('click', function(e) {
                        $(e.target).attr('class', 'lk').siblings('li').attr('class', 'll')
                        getPage1(e.target.id)

                    })


                }
                // page();
        }

    })
}

getPer();


//分页
function getPage1(page) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson`,
        type: 'get',
        headers: {
            token
        },
        data: {
            page
        },
        success: (res) => {
            console.log(res.data);




            const shownewcont = () => {
                const _content = document.querySelector('.card');
                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>标题</th>
            
                <th>图片</th>
               
                <th>序号</th>
               
                <th>操作</th>`
                res.data.forEach(item => {
                    const tr = document.createElement('tr')
                    tr.innerHTML = `<td>${item.id}</td>
                    <td>${item.title}</td>
                    <td><img class='hear' src='http://192.168.3.184:7001/${item.img_path}' /></td>
                    <td>${item.nshow}</td>
             
                    <td>
                    <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                    <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                    <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                    </td>`
                    _content.appendChild(tr)
                })

            }
            shownewcont();
            const showContena = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>标题</th>
            
                <th>序号</th>
               
                <th>操作</th>`
                res.data.forEach((item, index) => {
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);

                    // if (index >= (cur - 1) * size && index < cur * size) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td>${item.title}</td>
                     
                        <td>${item.introduce}</td>
                      
                        <td>
                        <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                        <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                        <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                        </td>`
                    _content.appendChild(tr)
                        // }
                })
            }

            // showContena()
        }
    })
}
//删除
//删除
function perDe(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/rotation/${id}`,
        type: 'delete',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            // window.location.reload();
        }
    })

}


const man = document.querySelector('#form_a');
console.log(man);
const load = document.getElementById('load')
console.log(load);

//上传图片
load.addEventListener('change', function() {

    const fd = new FormData(man);

    // console.log(load.files[0]);
    fd.append('img', load.files[0]);
    // let yet = fd.get('wall');
    // console.log(yet);
    shangchuan(fd)

})

//上传图片接口获取地址
function shangchuan(formdata) {
    console.log(formdata);
    $.ajax({
        url: `http://192.168.3.184:7001/images`,
        type: 'post',
        headers: {
            token
        },
        contentType: false,
        processData: false,
        data: formdata,
        success: (res) => {
            console.log(1);
            console.log(res);
            localStorage.setItem('myimg', res.paths);

            // window.location.reload();
        }

    })
}

//返回
const ing = document.querySelector('.return');
ing.addEventListener('click', function() {
    // window.location.href = '后台漫画详情列表.html'
    history.go(-1);
})



//增加
function addzhang(title, introduce, portrait) {
    console.log(123123)
    $.ajax({
        url: `http://192.168.3.184:7001/relevant`,
        type: 'post',
        headers: {
            token
        },
        data: {
            title,

            introduce,
            portrait
        },
        success: (res) => {
            console.log(res)
            console.log(res.row.portrait);
            localStorage.setItem('myimg', res.row.portrait)

            // window.location.reload();
        }

    })
}

//删除
function deleper(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/relevant/${id}`,
        type: 'delete',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            // window.location.reload();
        }
    })

}



//添加按钮
const add = document.querySelector('.add_')
    //文本框内容
const txt = document.querySelector('.search-txt');
//点击搜素
const a = document.querySelector('.search-btn');
//文本框
const ki = document.querySelectorAll('.ki');
//确认按钮
const su = document.querySelector('#su');
//取消
const cl = document.querySelector('#cl');
//添加模态框按钮
const o = document.querySelector('.o');
//获取表格




const imgCon = document.getElementById('imgCon');
const imgs = document.getElementById('img');
console.log(imgs);
imgCon.style.display = 'none';
let imgUrll = '';
load.onchange = function(e) {
    const fileList = e.target.files;
    console.log(fileList);
    console.log(fileList[0]);
    if (fileList.length) {
        console.log(222);

        imgCon.style.display = 'block';
        imgUrl = window.URL.createObjectURL(fileList[0]);
        console.log(imgUrl);
        imgs.src = imgUrl;


    }
}


//获取详情信息
function pertail(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/relevant/${id}`,
        type: 'get',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            const ki = document.querySelectorAll('.ki');

            const biaoti = ki[0];
            const xuhao = ki[2];
            // console.log(renwu);
            biaoti.value = res.data.title;

            xuhao.value = res.data.introduce;

            imgs.txt = `http://192.168.3.184:7001/${res.data.portrait}`
                // xuhao.value = res.data.nshow;
            imgs.src = imgs.txt;
            imgCon.style.display = 'block'
        }
    })
}

//修改
function gaikun(id, title, introduce, portrait) {
    $.ajax({
        url: `http://192.168.3.184:7001/relevant/${id}`,
        type: 'put',
        headers: {
            token
        },
        data: {
            id,
            title,

            introduce,
            portrait
        },
        success: (res) => {
            console.log(res);
            // window.location.reload();
        }
    })
}
var isper = 0;
const card = document.querySelector('.card');
card.addEventListener('click', function(e) {
    if (e.target.name === 'g') {
        const kal = e.target.dataset.id;
        isper = kal;
        // deleper(isper);
        pertail(isper)
        o.style.display = 'block'

    }
    //判断删除按钮
    if (e.target.name === 'delete') {
        const flag = confirm('是否删除?')
        if (flag == true) {
            console.log('你点了确认');
            deleper(e.target.id)
            console.log(e.target.id);
        } else(
            console.log('你点了取消')
        )
    }
})





add.addEventListener('click', function() {
    const ki = document.querySelectorAll('.ki');

    const biaoti = ki[0];
    const aa = ki[1]
    const xuhao = ki[2];
    o.style.display = 'block';
    isper = 0;
    imgs.src = ''
    console.log(imgs);
    imgCon.style.display = 'none'
    biaoti.value = '';
    // aa.value = ''
    xuhao.value = "";
})
su.addEventListener('click', function() {
    //获取各个文本框内容
    const biaoti = ki[0].value;
    // const chenghao = ki[1].value;
    const jieshao = ki[2].value;
    // const xiezhen = ki[3].value;
    // console.log(xiezhen);
    if (isper === 0) {
        const ss = localStorage.getItem('myimg')
        console.log(ss);
        // addzhang(fd)
        addzhang(biaoti, jieshao, ss)
        imgs.src = ''
        console.log(imgs);
        console.log(biaoti, jieshao, ss);
        o.style.display = 'none';

    } else {
        const ss = localStorage.getItem('myimg')
            // console.log(isper, renwu, chenghao, jiehsao, xiezhen);
            // console.log(isper, biaoti, ss, xuhao);
        gaikun(isper, biaoti, jieshao, ss)
        o.style.display = 'none'
    }

})
cl.addEventListener('click', function() {
    o.style.display = 'none';
})


a.addEventListener('click', function() {
    ser(txt.value)
    console.log(txt.value);


})

//搜索
function ser(id) {
    console.log(id);

    $.ajax({
        url: `http://192.168.3.184:7001/relevant/${id}`,
        type: 'get',
        headers: {
            token
        },
        data: {
            id
        },
        success: (res) => {
            console.log(res);
            const shownewcont = () => {
                const _content = document.querySelector('.card');
                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>标题</th>
                <th>介绍</th>
                <th>图片</th>
               
               
               
                <th>操作</th>`
                    // for (const item in res.data) {
                console.log(res.data.id);

                const tr = document.createElement('tr')
                tr.innerHTML = `<td>${res.data.id}</td>
                    <td>${res.data.title}</td>
                    <td class='year'>${res.data.introduce}</td>

                    <td><img class='hear' src='http://192.168.3.184:7001/${res.data.portrait}' /></td>
             
                    <td>
                    <img src='.\\imges\\de.png' class="btn" name="delete" id='${res.data.id}' />
                    <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${res.data.id}' />
                    </td>`
                _content.appendChild(tr)
                    // }

            }
            shownewcont();
        }
    })
}